<template>
  <div class="audit">
    <head-top head-title="接单订单" go-back="true"></head-top>
    <div class="audit-main">
      <ul>
        <li v-for="(a,index) in aList" :key="index">
          <div class="order-number">
            <span>订单号：{{a.order_id}}</span>
            <span>待审核</span>
          </div>
          <div class="order-content" @click="$router.push('/my/OrderDetails/'+a.order_id)">
            <h2>{{a.title}}</h2>
            <p>截止时间：{{a.end_at}}</p>
            <p>查验地址：{{a.address}}</p>
          </div>
          <div class="order-btn">
            <button @click="cancelBtn(a.order_id)">取消订单</button>
          </div>
        </li>
        <li v-if="flag&&aList.length === 0" class="no_data">
          <img src="../../../assets/default.png" alt="" width="100" height="100">
          <p>抱歉！暂无数据</p>
        </li>
        <li v-if="noDataShow" class="no_data">
          <img src="../../../assets/default.png" alt="" width="100" height="100">
          <p>抱歉！暂无数据</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import headTop from '../../../components/header/Header'
  import { auditList, cancelOrder } from '../../../api/MyOrder'
  import { Toast, MessageBox } from 'mint-ui'

  export default {
    name: 'Audit',
    data () {
      return {
        types: 'person',
        t_status: 2,
        aList: [],
        cstatus: 0, // 取消订单
        flag: false, // 标识：用于判断没有数据的时候的显示
        noDataShow: false // 用于code为400时候显示
      }
    },
    // 设置从哪个页面回来（停留在点击进入详情页时的位置）
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'OrderDetails') {
        to.meta.isBack = true
      }
      next()
    },
    activated () {
      if (!this.$route.meta.isBack) {
        this._auditList()
      }
      this.$route.meta.isBack = false
    },
    created () {
      this._auditList()
    },
    methods: {
      _auditList () {
        auditList(this.types, this.t_status).then(res => {
          // console.log(res)
          if (res.code === 200) {
            // reverse:颠倒数组元素的顺序
            this.aList = res.data.reverse()
            this.flag = true
            // console.log(this.aList)
          }
          if (res.code === 400) {
            this.noDataShow = true
          }
        })
      },
      // 取消订单
      cancelBtn (id) {
        MessageBox.confirm('', {
          closeOnClickModal: false,
          title: '提示',
          message: '确认取消此条订单吗？',
          confirmButtonText: '是',
          cancelButtonText: '否'
        }).then(action => {
          if (action == 'confirm') {
            cancelOrder(id, this.cstatus).then(res => {
              // console.log(res)
              if (res.code === 200) {
                Toast({
                  message: res.data,
                  position: 'middle',
                  duration: 1000
                })
                this._auditList()
              }
            })
          }
        }).catch(error => {
          if (error == 'cancel') {
            Toast({
              message: '不取消此条订单',
              position: 'middle',
              duration: 1000
            })
          }
        })
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
  .audit {
    padding-top: 50px;
    .audit-main {
      ul {
        li {
          border-bottom: 10px solid #f2f2f2;
          padding: 10px;
          .order-number {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            border-bottom: 1px solid #d9d9d9;
            padding: 2px 0 7px 0;
            span:first-child {
              color: #666666;
            }
            span:last-child {
              color: #2585d0;
            }
          }
          .order-content {
            h2 {
              font-weight: normal;
              color: #292929;
              font-size: 15px;
              padding-top: 10px;
            }
            p {
              font-size: 14px;
              color: #666666;
              padding-top: 10px;
            }
          }
          .order-btn {
            button {
              width: 100%;
              padding: 10px;
              background: #ffffff;
              border: 1px solid #2585d0;
              border-radius: 5px;
              outline: none;
              font-size: 15px;
              color: #2585d0;
              margin-top: 10px;
            }
          }
        }
        li:last-child {
          border-bottom: none;
        }
        .no_data {
          width: 100%;
          text-align: center;
          color: #0b7ad9;
          font-size: 14px;
          img {
            padding-top: 20px;
          }
          p {
            margin-top: 5px;
          }
        }
      }
    }
  }
</style>
